<template>
  <div class="page_all">
    <div class="zhubo tt_com" v-if="zhuboList.length">
      <div class="ctitle">
        <span class="title">&nbsp;'{{ kw }}' 相关主播</span>
        <span class="more" @click="tabList('PageZhubo',3)">更多<van-icon name="arrow" /></span>
      </div>

      <div class="box">
        <div class="warp">
          <ul class="zo">
            <li v-for="item in zhuboList" :key="item.uid">
              <a :href="`#${item.url}`">
                <div class="zo_box">
                  <div class="img">
                    <img :src="item.img" alt="" />
                  </div>
                  <div class="zo_info">
                    <div class="zo_title">{{ item.nickname }}</div>
                    <div class="zo_count">
                      <span class="count">
                        <van-icon name="friends-o" />{{
                          item.fcounts | getCount
                        }}
                      </span>
                    </div>
                  </div>
                </div>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="album tt_com" v-if="albumList.length">
      <div class="ctitle">
        <span class="title">&nbsp;'{{ kw }}' 相关专辑 </span>
        <span class="more" @click="tabList('PageAlbum',1)">更多<van-icon name="arrow" /></span>
      </div>
      <ul class="zo">
        <li v-for="(item, i) in albumList" :key="i">
          <a
          :href="`#${item.url}`"
          >
            <album-item
              :albumId="item.albumId"
              :img="item.img"
              :title="item.title"
              :des="item.des"
              :play="item.play"
              :tracks="item.tracks"
              :nickname="item.nickname"
              :url="item.url"
            ></album-item>
          </a>
        </li>
      </ul>
    </div>
    <div class="sound tt_com" v-if="soundList.length">
      <div class="ctitle">
        <span class="title">&nbsp;'{{ kw }}' 相关声音 </span>
        <span class="more" @click="tabList('PageSound',2)">更多<van-icon name="arrow" /></span>
      </div>
      <ul class="zo">
        <li v-for="(item, i) in soundList" :key="i">
          <a
          :href="`#${item.url}`"
          >
            <sound-item
              :trackid="item.trackid"
              :img="item.img"
              :title="item.title"
              :play="item.play"
              :duration="item.duration"
              :nickname="item.nickname"
              :url="item.url"
            ></sound-item>
          </a>
        </li>
      </ul>
    </div>
    <!-- <div class="search tt_com">
      <div class="ctitle">
        <span class="title">相关搜索</span>
      </div>
      <ul>
        <li>
          <a href=""></a>
        </li>
      </ul>
    </div> -->
    <my-footer v-if="zhuboList.length"></my-footer>
    
    <div class="loading" v-if="!zhuboList.length || !albumList.length || !albumList.length">
          <van-loading color="#ff1e00" type="spinner" />
    </div>
  
  </div>
</template>

<script>
import AlbumItem from "@/views/search/searchcomp/AlbumItem.vue";
import SoundItem from "@/views/search/searchcomp/SoundItem.vue";

import { initAllSearchData } from "@/request/api.js";
export default {
  data() {
    return {
      albumList: [],
      soundList: [],
      zhuboList: [],
    };
  },

  props: {
    kw: {
      type: String,
    },
  },
  components: {
    AlbumItem,
    SoundItem,
  },
  created() {
    this.initData();
  },
  methods: {
    async initData() {
        let params = {
            kw:this.kw,
            core:'all',
            page:1,
            rows:20
        }


      let { data: res } = await initAllSearchData(params);
      console.log("所有", res);
      console.log(res.data.albumViews.albums);
      let albumList = [];
      let soundList = [];
      let zhuboList = [];
      res.data.albumViews.albums.forEach((item) => {
        let obj = {
          albumId: item.albumInfo.id,
          title: item.albumInfo.title,
          des: item.albumInfo.intro,
          nickname: item.albumInfo.nickname,

          play: item.albumInfo.play,
          tracks: item.albumInfo.tracks,
          img: item.albumInfo.cover_path,
          url:item.pageUriInfo.url
        };
        albumList.push(obj);
      });
      this.albumList = albumList;

      res.data.trackViews.tracks.forEach((item) => {
        let obj = {
          trackid: item.trackInfo.id,
          img: item.trackInfo.cover_path,
          title: item.trackInfo.title,
          play: item.trackInfo.count_play,
          duration: item.trackInfo.duration,
          nickname: item.trackInfo.nickname,
          url:item.pageUriInfo.url
        };
        soundList.push(obj);
      });

      this.soundList = soundList;

      let zhubo = res.data.userViews.users.splice(0, 6);
      zhubo.forEach((item) => {
        let obj = {
          url: item.url,
          uid: item.userInfo.uid,
          nickname: item.userInfo.nickname,
          fcounts: item.userInfo.followers_counts,
          img: item.userInfo.smallPic,
          
        };

        zhuboList.push(obj);
      });

      this.zhuboList = zhuboList;

      console.log(zhubo);
    },

    tabList(compName,index){
        this.$emit('more',{compName,index})
    }
  },
};
</script>

<style lang="scss" scoped>
.page_all {
  .tt_com {
    .ctitle {
      padding: 0 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title {
        color: #40404c;
        font-size: 18px;
      }
      .more {
        font-size: 12px;
        color: #72727b;
        i {
          padding-left: 6px;
          font-size: 10px;
          font-weight: 700;
          color: #a3a3ac;
          vertical-align: middle;
        }
      }
    }
  }
  
 .loading{
     text-align: center;
 }

  .zhubo {
    // .box {
    //   width: 100%;
    //   overflow: hidden;
    //   overflow-x: auto;
    //   margin: 0 15px;
    // }
    .box {
      padding: 0 15px;
        margin: 20px 0;
       .warp::-webkit-scrollbar {
    display: none;
  }
      .warp {
        width: 100%;
        overflow: hidden;
        overflow-x: auto;
       
        .zo {
          display: flex;
          li {
            flex-shrink: 0;
            margin-right: 30px;
            a {
              display: block;

              .zo_box {
                display: flex;
                .img {
                  width: 40px;
                  height: 40px;
                  margin-right: 4px;
                  > img {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                  }
                }
                .zo_info {
                    margin-left: 5px;
                  .zo_title {
                    padding-bottom: 4px;
                    max-width: 140px;
                    line-height: 20px;

                    font-weight: 500;
                    font-size: 14px;
                    color: #40404c;
                  }
                  .zo_count {
                    font-size: 12px;
                    color: #a3a3ac;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .album {
    li {
      padding-left: 15px;
      a {
        display: block;
        border-bottom: 1px solid #e8e8ee;
      }
    }
  }
  .sound {
       margin-top: 20px;
    li {
      padding-left: 15px;
      a {
        display: block;
        border-bottom: 1px solid #e8e8ee;
      }
    }
  }
  .album,.sound{
      li:nth-last-child(1){
          a{
               border-bottom: 0;
          }
      }
  }
}
</style>

